<template>
  <!-- 顶部操作栏 -->
  <div class="topTool">
    <!-- 输入 & 选择框：1.职位名称 -->
    <div class="mt-4">
      <el-input
          v-model="input"
          placeholder="搜索内容"
          class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="搜索方式" style="width: 115px;">
            <el-option label="职位名称" value="1" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" style="width: 50px" @click="handleSearch"/>
        </template>
      </el-input>
    </div>
  </div>
  <!-- el-table数据表格组件 -->
  <el-table
      :data="userData"
      :header-cell-style="{ background: 'rgb(245,247,250)'}"
      empty-text="暂无数据"
      style="margin-top: 20px;width: 100%;"
      border
  >
    <!-- el-table-column列 -->
    <!-- 岗位ID -->
    <el-table-column prop="id" label="职位ID" sortable width="200px"></el-table-column>
    <!-- 岗位昵称 -->
    <el-table-column prop="jobName" label="职位名称" width="150px"></el-table-column>
    <!-- 岗位类型名称 -->
    <el-table-column prop="jobTypeName" label="职位类型" width="150px"></el-table-column>
    <!-- 职业介绍 -->
    <el-table-column prop="jobIntroduce" label="职位介绍" width="200px"></el-table-column>
    <!-- 薪资 -->
    <el-table-column prop="salary" label="薪资" sortable width="100px"></el-table-column>
    <!-- 技能要求 -->
    <el-table-column prop="skillRequire" label="技能要求" width="200px">
      <template #default="scope">
        <el-tag v-for="skill in scope.row.skillRequire" :key="skill" type="primary" style="margin-right: 5px">{{ skill }}</el-tag>
      </template>
    </el-table-column>
    <!-- 学历要求 -->
    <el-table-column prop="educationRequire" label="学历要求" width="100px"></el-table-column>
    <!-- 年龄要求 -->
    <el-table-column prop="ageRequire" label="年龄要求" width="100px"></el-table-column>
    <!-- 经验要求 -->
    <el-table-column prop="experienceRequire" label="工作经验要求" width="120px"></el-table-column>
    <!-- 用户ID -->
    <el-table-column prop="hrId" label="招聘者ID" sortable width="200px"></el-table-column>
    <!-- 招聘者昵称 -->
    <el-table-column prop="hrName" label="招聘者昵称" width="150px"></el-table-column>
    <!-- 身份 -->
    <el-table-column prop="status" label="身份" width="100px"></el-table-column>
    <!-- 联系方式 -->
    <el-table-column prop="phone" label="联系方式" width="120px"></el-table-column>
    <!-- 企业名称 -->
    <el-table-column prop="companyName" label="企业名称" width="150px"></el-table-column>
    <!-- 企业类型 -->
    <el-table-column prop="companyType" label="企业类型" width="150px">
      <template #default="scope">
        {{ scope.row.comany_type === '1' ? '国有独资企业' :
           scope.row.comany_type === '2' ? '有限责任公司' :
           scope.row.comany_type === '3' ? '股份有限公司' :
           scope.row.comany_type === '4' ? '中外合资' :
           scope.row.comany_type === '5' ? '外商独资' :
           scope.row.comany_type === '6' ? '个人独资企业' :
           scope.row.comany_type === '7' ? '合伙企业' : '中外合作经营企业' }}
      </template>
    </el-table-column>
    <!-- 法定代表人 -->
    <el-table-column prop="companyBoss" label="法定代表人" width="120px"></el-table-column>
    <!-- 企业介绍 -->
    <el-table-column prop="companyIntroduce" label="企业介绍" width="200px"></el-table-column>
    <!-- 企业地址 -->
    <el-table-column prop="companyAddress" label="企业地址" width="200px"></el-table-column>
    <!-- 企业图片  -->
    <el-table-column prop="companyImage" label="企业图片" width="90px">
      <template #default="scope">
        <img v-lazy="scope.row.companyImage" style="width: 65px;height: 65px">
      </template>
    </el-table-column>
    <!-- 发布时间 -->
    <el-table-column prop="postTime" label="发布时间" sortable width="110px" :formatter="formatTime"></el-table-column>
    <!-- 操作：删除 -->
    <el-table-column label="操作" width="90" fixed="right">
      <template #default="{ row }">
        <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <el-pagination
      background
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      style="margin-top: 5px"
  />
</template>

<script setup>
import { Delete, Search} from '@element-plus/icons-vue'
import { onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {adminApi} from "../../api/app";

// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

// 格式化日期
const formatTime = (row) => {
  const date = new Date(row.postTime);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}

//定义用户信息数据
const userData = ref([]);
const currentPage = ref(1);//定义当前页码
const pageSize = ref(5);//定义每页显示记录数
const total = ref(0);//总记录数
//获取当前页数据
const getData = () => {
  adminApi.getAllJob({
    size: pageSize.value,
    page: currentPage.value
  }).then(response => {
    userData.value = response.data;
    total.value = response.total;
  }).catch(error => {
    console.error(error);
  })
};

//处理页码变化点击事件
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getData();
};

const input = ref(); // 搜索框输入信息
const select = ref(); // 搜索方式选择栏信息
// 处理搜索
const handleSearch = () => {
  if (input.value.length > 0) { // 输入框有内容，根据内容查询数据
    if(select.value === '1') { // 职位名称
      adminApi.searchJobByJobName({
        size: pageSize.value,
        page: currentPage.value,
        name: input.value
      }).then(response => {
        userData.value = response.data;
        total.value = response.total;
      }).catch(error => {
        console.error(error);
      })
    }
  } else { // 输入框无内容，显示所有数据
    getData()
  }
}

// 处理删除按钮点击事件
const handleDelete = (row) => {
  ElMessageBox.confirm(
      '您确定要删除ID为【' + row.id + '】的职位数据吗?',
      '危险操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    delrow(row)
    ElMessage({
      type: 'success',
      message: '完成删除！',
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除!',
    })
  })
}
// 删除行数据
const delrow = (row) => {
  adminApi.deleteJobById({
    id: row.id,
    hrId: row.hrId
  }).then(response => {
    ElMessage({ type: 'success', message: '删除成功！' });
    getData();
  }).catch(error => {
    console.error(error);
  })
};
</script>

<style scoped>
.topTool {
  display: flex;
  justify-content: space-between; /* 元素沿着主轴均匀分布 */
  align-items: center; /* 元素在交叉轴上居中对齐 */
  z-index: 0;
  position: relative;
}
.topTool .mt-4 {
  flex: 1; /* 让这个元素占据剩余空间 */
}
</style>
